<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="猫眼电影"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="searchbox">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="lishi">

    </div>
    <div class="searchres">
      <h1 v-if="searchdetail.length !== 0">电影/电视剧/综艺</h1>
      <JieGuo
        v-for="(seraitem, searindex) in searchdetail"
        :key="searindex"
        :seraitem="seraitem"
      >
      </JieGuo>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "@/api/axios.js";
import JieGuo from "@/gongneng/search/JieGuo.vue";
const historyList=JSON.parse(window.localStorage.getItem("historyList")) || []
const searchdetail = ref([]);
const onCancel = () => history.back();
const onClickLeft = () => history.back();
const myData = localStorage.getItem("cityId") || "default value";
// console.log(myData);
const cityName = localStorage.getItem("cityName") || "default value";
// console.log(cityName);

const value = ref("");
const onSearch = (val) => {
  const getDetail = () =>
    axios.get(
        `https://apis.netstart.cn/maoyan/search/suggest?kw=${val}&cityId=${myData}`
    );
    // historyList= [
    //     ...historyList,
    //     {
    //       storyName: val,
    //     },
    //   ]
  // console.log('historyList',historyList);
  // console.log(getDetail);

  async function update() {
    const { data } = await getDetail();
    searchdetail.value = data?.movies?.list;
    // console.log("searchdetail", searchdetail);
  }
  update();
};
</script>

<style lang="scss" scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #e54847;
  :deep(.van-nav-bar__content) {
    background-color: #e54847;
  }
  :deep(i) {
    color: #fff;
  }
  :deep(.van-nav-bar__text) {
    color: #fff;
  }
  :deep(.van-ellipsis) {
    color: #fff;
  }
}
.searchbox {
  width: 100vw;
  position: fixed;
  top: 46rem;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #f5f5f5;
}
.searchres {
  margin-top: 100rem;
}
.searchr {
  width: 10vw;
  padding: 5rem;
  line-height: 40rem;
}
.searchContent {
  display: flex;
  height: 30px;
  width: 100%;
  margin: 10rem 5rem;
  background: #fff;
  border-radius: 7px;

  .searchLogo {
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 13px;
      height: 13px;
    }
  }

  input {
    flex: 1;
    border: none;
    outline: none;
    color: #333;
    background: #fff;
  }

  input::-webkit-input-placeholder {
    color: #333;
  }

  .delbtn {
    margin: 8px;

    img {
      width: 14px;
    }
  }
}
</style>
